<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>AJAX 的快速上手 （接收响应）</title>
</head>
<body>
	<script type="text/javascript">
		var xhr = new XMLHttpRequest();
		
		// 如果需要捕获第一个状态的变换,需要注意代码执行顺序的问题 (不要出现来不及的情况)
		// xhr.onreadystatechange() {
		// 	// 这个事件并不是只在响应时触发,章台改变就触发
		// 	console.log(1)
		// 	console.log(this.readyState)
		// }
		
		xhr.open('GET','time.php');
		xhr.send();
		
		// 因为客户端永远不知道服务端何时才能返回我们需要的响应
		// 所以AJAX API 采用事件的机制 (通知的感觉)
		xhr.onreadystatechange = function () {
			// 这个事件并不是只在响应时触发,XHR 状态改变就触发
				// console.log(1)
			if(this.readyState !== 4) return;
			// 获取响应内容 (响应体)
			console.log(this.responseText);
		}
		//因为响应需要时间,所以无法通过返回值的方式返回响应
		// var response = xhr.send()
		// console.log(response)
	</script>
</body>
</html>